<script lang="ts">
  import { Tabs, TabItem } from 'svelte-5-ui-lib'
  import {
    FishOutlineIon,
    TrainOutlineIon,
    BugOutlineIon,
    ListOutlineIon,
    BodyOutlineIon,
  } from 'svelte-animated-icons'

  import Params from '$lib/components/Params.svelte'
  import Body from '$lib/components/Body.svelte'
  import Headers from '$lib/components/Headers.svelte'
  import ApiHeads from '$lib/components/ApiHeads.svelte'
  import Request from '$lib/components/Request.svelte'
  import Response from '$lib/components/Response.svelte'
  import { selectedAPIItem } from '../lib/utils/stores.svelte'
  import type { APIResourceItem } from '$lib/api/types'

  let currentAPI: APIResourceItem | null = $derived($selectedAPIItem) as APIResourceItem
</script>

<div class="shadow-lg rounded-2xl p-10 h-full bg-white dark:bg-zinc-900 transition-colors duration-300">
  <div class="api">
    <div class="api-head mb-4 border-b border-zinc-200 dark:border-zinc-700">
      <ApiHeads {currentAPI} />
    </div>
    <div class="api-body">
      <Tabs class="rounded-xl overflow-hidden bg-zinc-50 dark:bg-zinc-800 shadow-md">
        <TabItem open title="Headers" class="!px-0">
          {#snippet titleSlot()}
            <div class="flex items-center gap-2 text-base font-medium text-zinc-700 dark:text-zinc-200">
              <TrainOutlineIon size={22} />
              Headers
            </div>
          {/snippet}
          <div class="p-6">
            <Headers />
          </div>
        </TabItem>
        <TabItem title="Request" class="!px-0">
          {#snippet titleSlot()}
            <div class="flex items-center gap-2 text-base font-medium text-zinc-700 dark:text-zinc-200">
              <FishOutlineIon
                size={22}
                event="hover"
                pauseDuration={300}
                transitionParams={{ duration: 800, delay: 0 }}
              />
              Request
            </div>
          {/snippet}
          <div class="p-6">
            <Request />
          </div>
        </TabItem>
        <TabItem title="Response" class="!px-0">
          {#snippet titleSlot()}
            <div class="flex items-center gap-2 text-base font-medium text-zinc-700 dark:text-zinc-200">
              <BugOutlineIon size={22} />
              Response
            </div>
          {/snippet}
          <div class="p-6">
            <Response />
          </div>
        </TabItem>
        <TabItem title="Params" class="!px-0">
          {#snippet titleSlot()}
            <div class="flex items-center gap-2 text-base font-medium text-zinc-700 dark:text-zinc-200">
              <ListOutlineIon size={22} />
              Params
            </div>
          {/snippet}
          <div class="p-6">
            <Params />
          </div>
        </TabItem>
        <TabItem title="Body" class="!px-0">
          {#snippet titleSlot()}
            <div class="flex items-center gap-2 text-base font-medium text-zinc-700 dark:text-zinc-200">
              <BodyOutlineIon size={22} />
              Body
            </div>
          {/snippet}
          <div class="p-6">
            <Body />
          </div>
        </TabItem>
      </Tabs>
    </div>
  </div>
</div>

<style>
  /* 仅保留必要的自定义样式，全部样式用 Tailwind 4.1 类名实现 */
</style>